<template>
  <div>
    <div class="slide_item">
      <div class="label">背&nbsp;&nbsp;景</div>
      <span>
        <span>背景：</span>
        <select class="select" v-model="defaultBackground">
          <option v-if="item.sffm=='False'" v-for="item in styles" :key="item.id" :label="item.styleName"
                  :value="item.id"></option>
        </select>
        <!-- <button @click="addBackgroundImage">...</button> -->
      </span>
      <!-- <span>
        <span>版式：</span>
        <select class="select" v-model="defaultTemplate">
          <option v-for="item in template(defaultBackground)" :key="item.id" :label="item.templateName" :value="item.id"></option>
        </select>
      </span> -->
    </div>
  </div>

</template>
<script>
  // import { remote } from 'electron'
  import { mapState, mapGetters, mapActions } from 'vuex'
  import action from '../../common/typeActions'
  // let extensions = {
  //   properties: ['openFile', 'showHiddenFiles'],
  //   filters: [{ name: 'Image', extensions: ['png', 'jpg', 'bmp'] }]
  // }
  export default {
    name: 'EditorConfig',
    data: () => {
      return {}
    },
    computed: {
      ...mapGetters(['template']),
      ...mapState({
        styles: state => state.slideEditor.styles,
        DefaultBackground: state => state.slideEditor.DefaultBackground
      }),
      defaultBackground: {
        get () {
          return this.DefaultBackground
        },
        set (value) {
          this.SetSelectedBackground(value)
        }
      },
      defaultTemplate: {
        get () {
          return this.$store.getters.defaultTemplate
        },
        set (value) {
          this.SetSelectedTemplate({ sid: this.defaultBackground, id: value })
        }
      }
    },
    methods: {
      ...mapActions({
        SetSelectedBackground: action.SLIDEEDITOR.SetSelectedBackground,
        SetSelectedTemplate: action.SLIDEEDITOR.SetSelectedTemplate
      })
    }
  }
</script>
<style scoped>
  .slide_item {
    width: calc(100% - 60px);
    margin: 10px auto 0;
    padding-bottom: 8px;
    border: 1px solid #cccccc;
    border-radius: 10px;
    position: relative;
    font-size: 0;
  }

  .slide_item .label {
    position: absolute;
    background-color: white;
    top: 0;
    left: 20px;
    font-size: 12px !important;
    transform: translateY(-50%);
  }

  .slide_item > span {
    display: inline-block;
    margin-top: 16px;
    width: 50%;
    font-size: 14px;
  }

  .slide_item > span > span {
    position: static;
    vertical-align: baseline;
    margin-left: 10px;
    margin-top: 2px;
    display: inline-block;
  }

  .slide_item .select {
    width: calc(100% - 70px);
  }

  .slide_item .input {
    width: calc(100% - 70px);
  }

  .slide_item .row {
    width: 100%;
    margin-left: 10px;
  }

  .slide_item .row .input {
    width: calc(100% - 280px);
  }

  .slide_item input,
  .slide_item select {
    height: 25px;
    font-size: 14px;
    padding: 1px 10px;
  }

  select,
  input {
    border: 1px solid #66afe9;
    outline: none;
    border-radius: 3px;
    padding: 3px 10px;
    height: 30px;
    width: 200px;
    font-size: 18px;
  }

  button {
    border: 1px solid #66afe9;
    outline: none;
    border-radius: 3px;
    padding: 0;
    height: 25px;
    width: 30px;
    margin-left: -5px;
  }
</style>

